<template>
  <!-- 上架作业 -->
  <div id="InventoryQuery">
    <root name="InventoryQuery">
      <SafeHeader
        v-bind="{
          title: '库存查询',
          isBack: true,
          fixedTop: true,
        }"
      />
      <div>
        <v-container>
          <v-card outlined class="py-3">
            <v-row class="ma-1">
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="库位"
                  dense
                  class="my-0 inputPlaceholder"
                  hide-details
                  v-model="searchForm.cellCode"
                  clearable
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-1">
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="物料"
                  dense
                  class="inputPlaceholder"
                  v-model="searchForm.itemCode"
                  hide-details
                  clearable
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-1">
              <v-col cols="12" class="py-1">
                <v-text-field
                  label="容器"
                  dense
                  class="inputPlaceholder"
                  v-model="searchForm.boxCode"
                  hide-details
                  clearable
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0 mt-2">
              <v-col
                cols="12"
                class="
                  py-0
                  mt-2
                  d-flex
                  align-center
                  justify-center
                  font-weight-bold
                "
                style="font-size: 15px"
                ><v-btn color="#193690" dark style="boarder"
                  ><span
                    style="color: #fff; font-size: 15px"
                    class="font-weight-bold"
                    @click="search"
                    >查询</span
                  ></v-btn
                ></v-col
              >
            </v-row>
          </v-card>
        </v-container>
        <v-container class="task_list mb-15 white">
          <v-row>
            <v-col
              cols="12"
              class="card-title"
              style="padding-bottom: 8px; padding-top: 8px"
              >库存列表</v-col
            >
          </v-row>
          <v-divider class="mb-2"></v-divider>
          <div v-if="stockInfo[0]">
            <v-container v-for="(item, index) in stockInfo" :key="index">
              <v-row @click="clickStock(item)">
                <v-col cols="12" class="pa-0 pb-2">
                  <v-card outlined style="background-color: #f2f3f5">
                    <v-card-subtitle>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable">容器号</v-col>
                        <v-col class="py-1 card-value">{{
                          item.boxCode
                        }}</v-col>
                      </v-row>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable px-2"
                          >物料编码</v-col
                        >
                        <v-col class="py-1 card-value px-2">{{
                          item.itemCode
                        }}</v-col>
                      </v-row>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable">批次号</v-col>
                        <v-col class="py-1 card-value">{{
                          item.batchName
                        }}</v-col>
                      </v-row>
                      <v-row
                        class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                      >
                        <v-col cols="4" class="py-1 card-lable">数量</v-col>
                        <v-col class="py-1 card-value">{{
                          item.quantity
                        }}</v-col>
                      </v-row>
                    </v-card-subtitle>
                  </v-card>
                </v-col>
              </v-row>
            </v-container>
          </div>
          <v-row v-else>
            <v-col cols="12" class="text-center">暂无数据</v-col>
          </v-row>
        </v-container>
      </div>
      <v-overlay :value="overlay">
        <v-progress-circular indeterminate size="64"></v-progress-circular>
      </v-overlay>
    </root>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
// import Message from "@/components/message_box_wms/index";
// import Storage from "@/utils/storage.js";
// import wms from "../../utils/http.js";
// import { apiList } from "@/static/apiList";
import wms from "../../utils/http.js";
import { printToJiaBo } from "@/static/print";
export default {
  name: "InventoryQuery",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      overlay: false,
      loading: false,
      headers: [
        { text: "库位", value: "cellCode" },
        { text: "容器", value: "boxCode" },
        { text: "物料编码", value: "itemCode" },
        { text: "物料名称", value: "itemName" },
        { text: "批次", value: "batchName" },
        { text: "数量", value: "quantity" },
      ],
      searchForm: {
        itemCode: "",
        cellCode: "",
        boxCode: "",
      },
      stockInfo: [
        // {
        //   cellCode: "库位",
        //   boxCode: "容器",
        //   itemCode: "物料编码",
        //   itemName: "物料名称",
        //   batchName: "批次",
        //   quantity: 110,
        // },
      ],
    };
  },
  methods: {
    search() {
      //根据库位或者物料进行查询
      if (!this.searchForm.cellCode && !this.searchForm.itemCode && !this.searchForm.boxCode) {
        window.api.toast({ msg: "查询条件为空", location: "middle" });
        return false;
      }
      this.overlay = true;
      wms
        .get({
          url: "/inventorys/getStock",
          data: {
            cellCode: this.searchForm.cellCode == null ? "" : this.searchForm.cellCode,
            itemCode: this.searchForm.itemCode == null ? "" : this.searchForm.itemCode,
            boxCode: this.searchForm.boxCode == null ? "" : this.searchForm.boxCode,
          },
        })
        .then((res) => {
          if (res.status == 200 && res.data.code == 200) {
            // console.log(JSON.stringify(res.data.data));
            let stockData = res.data.data;
            if (stockData.length == 0) {
              window.api.toast({ msg: "无数据", location: "middle" });
            }
            this.stockInfo = stockData;
            this.overlay = false;
          } else {
            alert(res.data.message);
            this.overlay = false;
          }
        });
    },
    clickStock(item) {
      console.log(JSON.stringify(item));
      let r = confirm("是否打印容器[" + item.boxCode + "]对应条码");
      if (r == true) {
        printToJiaBo(
          item.itemCode,
          item.itemName,
          item.batchName,
          item.quantity,
          item.boxCode
        );
      }
    },
  },
};
</script>

<style lang="sass" scoped>
.scanContainer
  >.row
    margin: 0
    padding: 10px

.shelfOperation_table
  ::v-deep .v-data-table__mobile-table-row
    margin: 4px 8px
    background-color: #e8e8e8f1
  ::v-deep .v-data-table__mobile-row
    min-height: 28px !important
    // 暂无数据的显示
    ::v-deep .v-data-table__empty-wrapper
      display: flex
      justify-content: center
      align-items: center
      td
        line-height: 48px

.inputPlaceholder
  ::v-deep.v-text-field__slot
    input::-webkit-input-placeholder
      font-size: 15px
    input::-moz-placeholder
      font-size: 15px
    input:-moz-placeholder
      font-size: 15px
    input:-ms-input-placeholder
      font-size: 15px
</style>